<template>
  <div>
    <el-button type="primary"
               @click="addIcon">添加图标</el-button>
    <el-table :data="iconList"
              ref="iconTable"
              style="width: 100%"
              row-key="id">
      <el-table-column :prop="index"
                       :label="item"
                       v-for="(item, index) in tableColumList" :key="index">
        <template slot-scope="scope">
          <div v-if="item == `图标`">
            <el-image :prop="index.iconUrl"
                      :src="scope.row.iconUrl"
                      style="width: 40px;height:40px ">
              <div slot="error"
                   class="image-slot">
                <i> 暂无图片</i>
              </div>
            </el-image>
          </div>
          <div v-else-if="item == `状态`">
            <el-tag v-if="scope.row.status == 1"
                    size="medium"> 有效</el-tag>
            <el-tag v-else
                    size="danger">无效 </el-tag>
          </div>

          <div v-else-if="item == `操作`"
               style="display: inline-block">
            <!-- <el-button type="primary"
                       icon="el-icon-edit"
                       circle> </el-button> -->
            <el-button type="danger"
                       icon="el-icon-delete"
                       circle
                       @click="deleteIcon(scope.row)">
            </el-button>
          </div>
          <div v-else>
            {{ scope.row[index] }}
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination @current-change="handleCurrentChange"
                   @size-change="handleSizeChange"
                   :total="this.totalNum"
                   :current-page="this.currentPageNum"
                   :page-sizes="[5,10]"
                   :page-size="this.currentPageSize"
                   layout="total , sizes , prev , pager , next"></el-pagination>
    <el-dialog 
               title="添加图标"
               :visible.sync="dialogVisible">
      <el-form :model="iconForm"
               label-width="80px"
               ref="iconForm"
               :rules="rules">
        <el-form-item label="图片名称"
                      prop="name">
          <el-input v-model="iconForm.name"></el-input>
        </el-form-item>

        <el-form-item label="等级">
          <el-input type="number"
                    v-model="iconForm.level"
                    placeholder="等级必须为1"></el-input>
        </el-form-item>
        <el-form-item label="添加图标">
          <el-upload ref="upload"
                     action
                     :accept="'.png'"
                     :http-request="uploadIcon"
                     list-type="picture-card"
                     :limit="1"
                     :show-file-list="true"
                     :auto-upload="false"
                     :on-change="change"
                     :on-exceed="exceed">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="onSubmit('iconForm')">提交</el-button>
          <el-button type="primary"
                     @click="closeDialog('iconForm')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "TagSetting",
  components: {},
  data() {
    return {
      tableColumList: {
        id: "编号",
        name: "图标名称",
        iconUrl: "图标",
        level: "等级",
        status: "状态",
        createTime: "创建时间",
        updateTime: "更新时间",
        tool: "操作",
      },
      currentPageNum: 1,
      currentPageSize: 5,
      iconList: [],
      totalNum: 0,
      dialogVisible: false,
      iconForm: {
        name: "",
        level: "",
      },
      fileArry: [],

      headers: {
        "Content-Type": "multipart/form-data",
      },

      rules: {
        name: [{ required: true, message: "图标名称不能为空", trigger: "blur" }],
        level: [{ required: true, message: "等级不能为空", trigger: "blur" }]
      },
    };
  },
  created() { },
  methods: {
    // 初始化分页数据
    initIconData(currentPageNum, currentPageSize) {
      this.getRequest("/category/api/list", {
        pageNum: currentPageNum,
        pageSize: currentPageSize,
      }).then((res) => {
        console.log(res);
        if (res.code == 200 && res.msg == "success") {
          this.iconList = res.data;
          this.totalNum = res.total;
        } else {
          this.$alert("错误了", "提示", {
            confirmButtonText: "确定",
          });
        }
      });
    },
    // 当前页变化
    handleCurrentChange(val) {
      this.currentPageNum = val;
      this.initIconData(this.currentPageNum, this.currentPageSize);
    },

    // 当前页条数变化
    handleSizeChange(val) {
      this.currentPageSize = val;
      this.initIconData(this.currentPageNum, this.currentPageSize);
    },
    // 点击添加图标
    addIcon() {
      this.dialogVisible = true;
    },
    // exceed 限制文件上传数量
    exceed() {
      this.$message.warning(`当前限制选择1张图片`);
    },
    change(file, fileList) {
      if (fileList.length > 0) {
        this.fileArry.push(file.raw);
      }
    },
    uploadIcon(option) {
      this.fileArry.push(option);
    },
    // 关闭表单弹窗
    closeDialog(formName) {
      this.dialogVisible = false;
      // 清空表单数据
      this.$refs[formName].resetFields();
      this.$refs.upload.clearFiles();
         this.iconList = [];
     },
   
    // 添加图标数据
    onSubmit(formName) {
      let params = new FormData();
      params.append("name", this.iconForm.name);
      params.append("level", this.iconForm.level);
      params.append("file", this.fileArry[0]);
      console.log(params);
      this.uploadRequest("/category/api/addMidIcon", params, this.headers).then(
        (res) => {
          console.log(res);
          if (res.code == 200 && res.msg == "success") {
            //关闭表单弹窗
            this.dialogVisible = false;
            // 清空表单数据 
            // this.restForm(formName);
            this.closeDialog(formName);
            this.$message({
              message: "添加成功",
              type: "success",
            });
            //刷新表格
            this.initIconData(this.currentPageNum, this.currentPageSize);
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        }
      );
    },

    deleteIcon(row) {
      this.$confirm("此操作将永久删除该记录 ，是否继续", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.deleteRequest("/category/api/deleteMidIcon/" + row.id).then(
          (res) => {
            // console.log(res);
            if (res.code == 200 && res.msg == "success") {
              this.$message({
                message: "删除成功",
                type: "success",
              });

              this.initIconData(this.currentPageNum, this.currentPageSize);
            } else {
              this.$message({
                message: res.msg,
                type: "warning",
              });
            }
          }
        );
      })
      .catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
      })
      
      ;
    },
  },
  mounted() {
    // 钩子加载数据
    this.initIconData(this.currentPageNum, this.currentPageSize);
  },
};
</script>

<style scoped></style>
